/**
 * 自动审核报错弹框
 */
import React, { Component } from 'react';
import { messages } from "share/common";
import { Modal } from 'antd';
import "styles/financial-management/new-finance-audit/components/auto-audit-error-modal.scss";

class AutoAuditErrorModal extends Component {

  state = {
    loading: false,
  };

  handlePass = () => {
    const { errorList } = this.props;
    this.props.onPass({
      reason: '',
      honestEvent: [],
      attachmentOIDs: [],
      additionalItems: [],
      expenseReportOIDList: errorList.map(item => item.entityOID)
    });
    this.props.onClose(false);
  };

  renderError = ({ title, content }) => {
    return (
      <div className="auto-audit-error-modal-list">
        <div className="auto-audit-error-modal-title">
          <div className="auto-audit-error-modal-title-bg"/>
          <div className="auto-audit-error-modal-title-info">{title}</div>
        </div>
        <div dangerouslySetInnerHTML={{ __html: content && content.replace(/\n/g, '<br/>') }}/>
      </div>
    )
  };

  render() {
    const { errorList, onClose } = this.props;
    const { loading } = this.state;
    const _html = messages('expense-14.key143')/*自动审核失败，或找不到匹配的校验规则，<span className=\"default-color-inverse-font\">是否仍然审核通过</span>？*/;
    return (
      <Modal
        title={messages('expense-14.key144')/*校验结果*/}
        visible={errorList.length > 0}
        width={680}
        maskClosable={false}
        confirmLoading={loading}
        className="auto-audit-error-modal"
        okText={messages('expense-14.key27')/*审核通过*/}
        cancelText={messages('common.back')/*返回*/}
        onOk={this.handlePass}
        onCancel={() => onClose(true)}
      >
        <div>
          <div dangerouslySetInnerHTML={{__html: _html.replace('className', 'class')}} />
          {messages('expense-14.key145')/*您可在费用明细-待审核下查看未审核通过的费用，并基于自动审核标签查看具体失败原因。*/}
        </div>
        {errorList.map(item => this.renderError(item))}
      </Modal>
    )
  }
}

export default AutoAuditErrorModal;
